<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="200px" />
        </van-swipe-item>
    </van-swipe>
    <div class="prsche">
        <van-row>
            <van-col span="5">
                <img src="../assets/ms.png" alt="" width="90%" height="90%">
            </van-col>

            <van-col span="19">
                <div class="carcon">
                    <van-grid :column-num="4" :border="false">
                        <van-grid-item v-for="value in msCarlist" :key="value">
                            <img :src="value.carimg" alt="" width="100%" height="48px"></img>
                            <div class="text-center">
                                ￥{{ value.minprice }} 起
                            </div>
                        </van-grid-item>
                    </van-grid>

                </div>
            </van-col>
        </van-row>
    </div>
    <!--商品展示-->
    <div class="product-content">
        <van-grid :column-num="2" :border="false">
            <van-grid-item v-for="(item, index) in productData" :key="index">
                <img :src="item.carimg" alt="" width="100%" height="98px">
                <div style="width: 100%; margin-left: 5px;">
                    <div style="font-weight: 700;margin-top: 2px; margin-bottom: 2px;">{{ item.carname }}</div>
                    <div style="font-size: 14px; color:#464748;">{{ item.subname }}</div>
                    <div style="color: red; font-size: 18px; margin-top: 2px; margin-bottom: 2px;"><span
                            style="font-size: 13px;">￥</span>{{ item.minprice }}-{{ item.maxprice }}万</div>
                    <div style="margin-left: -10px; margin-top: 10px;">
                        <van-button type="warning" @click="gozx(index)">去咨询</van-button>
                        <van-button type="danger" @click="goshop(index)">立即购买</van-button>
                    </div>
                </div>
            </van-grid-item>
        </van-grid>
    </div>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { CarProductApi } from '../api'

const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
])

const msCarlist = ref([])
const productData = ref([])
onMounted(() => {
    CallCarProduct()
})

// 调用商品信息API

const CallCarProduct = () => {
    CarProductApi.select.call().then(res => {
        console.log(res)
        images.value = res.map(item => item.carimg).slice(0, 4)
        msCarlist.value = res.slice(0, 4)
        productData.value = res

    })
}

// 去咨询
const gozx = (index) => {
    console.log(index)
}
// 立即购买
const goshop = (index) => {
    console.log(index)
}
</script>

<style scoped>
.prsche {

    width: 98%;
    height: 100px;
    margin-top: 10px;
    margin: 0 auto;
    background: url(../assets/msbg.png) no-repeat center / 100% 100%;
    border-radius: 13px;

    img {
        border-radius: 13px;
        margin-top: 6px;
        margin-left: 5px;
    }

    .carcon {
        width: 99%;
        height: 98px;
        background-color: white;
        margin-top: 1px;
        border-radius: 13px;

        :deep(.van-grid-item__content--center) {

            border-radius: 13px;
            height: 98px;
        }

        .text-center {
            font-size: 12px;
            color: red;
            padding-top: 7px;
        }
    }
}

.product-content {
    width: 100%;
    height: 100%;
    margin-top: 14px;
    margin-bottom: 60px;
}

.van-button {
    height: 28px;
    width: 88px;
    margin-left: 3px;
}
</style>